<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Table控件</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<link rel="stylesheet"  type="text/css" href="../kitchensink/android.css" title="frosty"/>
<link rel="stylesheet"  type="text/css" href="../kitchensink/iphone.css" title="frosty"/>
<link rel="stylesheet" type="text/css" href="../res/js/tab/mawTab.css"/>
</head>
<body> 
	<header class="headerbar" >
            <a href="javascript:$.ui.goBack();"><div class="icon_back"></div></a>
            <div class="flex"><h1></h1></div>
            <a href="#"><div class="icon_set"></div></a>
    </header>
        <div class="content_list">
           <h2>员工申请</h2>
           <div class="searchbar">
               <button class="button_search" >搜索</button>
               <button class="button_search">查询</button>
           </div>
            <div class="tabDiv">
                <table class="table_form" >
                      <tr>
                        <td width="30%">
                          <label for="" >申请人</label></td>
                          <td width="70%"><label  id=""  class="label_text"/><a href="#">葛婉莹</a>07711</td>
                      </tr>
                      <tr>
                          <td >
                          <label for="" class="selected">安全级别</label></td>
                          <td><label  id=""  class="label_text"/></td>
                       </tr>
                      <tr>
                      	  <td>
                          <label for="" class="selected">部门</label></td>
                          <td><label  id=""  class="label_text"/>通信事业部</td>
                      </tr>
                      <tr>
                           <td>
                          <label for="" class="selected">片区领导</label></td>
                          <td><span class="label_query"></span></td>
                      </tr>
                      <tr>
                          <td><label for="" class="selected">片区领导</label></td>
                          <td>
                          <div class="inp_box">
                          	<input id="" class="jq-ui-forms" type="text" style="width:80%;"/> 
                            <input type="button" class="inp_query"></input>
                           </div>
                          </td>
                      </tr>
                      <tr>
                          <td>
                          <label for="" class="selected">片区领导</label></td>
                          <td><input id="" class="label_query" type="text"  readonly></input></td>
                      </tr>
                  </table>
            </div>
            <div class="table_normal_box">
              <table cellpadding="0" cellspacing="0" class="table_normal" id='tb_product'>
                 <caption>员工本年度累计已请假天数</caption>
                    <thead>
                        <tr>
                            <td>请假类别</td>
                            <td>去年可休天数</td>
                            <td>当年可休天数</td>
                            <td>已休天数</td>
                            <td>剩余天数</td> 
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>年休假</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>事假</td>
                            <td>0</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>  
                        <tr>
                            <td>类别</td>
                            <td>0</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>  
                    </tbody>
                </table>	
             </div>	
            <form>
                <div class="table_normal_box">
                <table cellpadding="0" cellspacing="0" class="table_normal">
                 <caption><span>本次申请明细</span><span><a href="" class="icon_add" id='product_add' data-ignore="true"></a></span><span><a href="" class="icon_delete" id='product_del' data-ignore="true"></a></span></caption>
                    <thead>
                        <tr>
                            <td>申请类别</td>
                            <td>起始日</td>
                            <td>起始时间</td>
                            <td>结束日</td>
                            <td>结束时间</td>
                            <td>天数</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span></span><input type="checkbox"  class="jq-ui-forms"/><label></label></td>
                            <td><button class="btn_search"></button></td>
                            <td><input type="input"  class="jq-ui-forms"/></td>
                            <td><input type="input"  class="jq-ui-forms"/></td>
                            <td>0.00</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <table cellpadding="0" cellspacing="0" class="table_normal">
                	<tr>
                        <td>申请事由</td>
                        <td><textarea class="jq-ui-forms" style="width:90%;"></textarea></td>
                    </tr>
                    <tr>
                        <td>相关规定</td>
                        <td><p>1、员工有下列情形之一的，不享受当年的年休假： </p></td>
                    </tr>
                </table>
                </div>

                <div class="table_normal_box">
                <h2>签字意见</h2>
                 <table cellpadding="0" cellspacing="0" class="table_normal">
                	<tr>
                        <td>签字意见</td>
                        <td >
                        	
                            <textarea class="jq-ui-forms" style="width:90%;"></textarea>
                        </td>
                    </tr>
                </table>
                </div>
           
            </form>
   </div>
</div>
<script type="text/javascript" >
	$.ui.ready(function(){
		var count = 0;
		function product_addHandler(){
			//console.log('sldfk');
			count++;
			var newRow = ['<input type="checkbox"  class="jq-ui-forms"/><label></label>','<button class="btn_search"></button>','<input type="input"  class="jq-ui-forms"/>','<input type="input"  class="jq-ui-forms"/>','0.00','row_'+count,'<input type="input"  class="jq-ui-forms"/>'];
			$('#tb_product').children('tbody').addRow(newRow);
			return false;//必不可少
		}
		
		function product_delHandler(){
			var len = $('#tb_product').children('tbody').countRow();
			console.log('len before:'+len);
			var index = 0;
			if(len > 0){
				index = len-1;
			}
			
			console.log($('#tb_product').children('tbody').row(0));
			$('#tb_product').children('tbody').removeRow(0);
			len = $('#tb_product').children('tbody').countRow();
			console.log('len after:'+len);
			return false;
		}
		
		
		
		$("#product_del").bind('click',product_delHandler);
		$("#product_add").bind('click',product_addHandler);
		
	});
	

</script>
</body>
</html>
